<template>
	<view class="">
		<w-navbar title="编辑商品" titleColor="black" backgroundColor="white"></w-navbar>
		<w-container>
			<template>
				<view class="content">
					<view class="form_box">
						<view class="form_name">
							商品信息
						</view>
						<view @click="goClassificationChoose" class="form_item disable_style">
							<view class="left">
								商品分类
							</view>
							<view class="right">
								<view class="fr-ac">
									<view class="form_value" :style="{'color':category_choose.name?'#888':''}">
										{{category_choose.name?category_choose.name:'选择分类'}}
									</view>
									<view class="iconfont icon-arrow-right-bold"></view>
								</view>
							</view>
						</view>
						<view class="form_item disable_style">
							<view class="left">
								商品名称
							</view>
							<view class="right">
								<view class="fr-ac">
									<view class="form_value">
										<input :disabled="true" v-model="title" type="text" placeholder="请填写商品名称" />
									</view>
								</view>
							</view>
						</view>
						<view class="form_item disable_style">
							<view class="left">
								商品货号
							</view>
							<view class="right">
								<view class="fr-ac">
									<view class="form_value">
										<input :disabled="true" v-model="goods_sn" type="text" placeholder="请填写商品货号" />
									</view>
								</view>
							</view>
						</view>
						<view class="form_item">
							<view class="left">
								商品库存
							</view>
							<view class="right">
								<view class="fr-ac">
									<view class="form_value">
										<input v-model="stocks" type="text" placeholder="请填写商品库存" />
									</view>
								</view>
							</view>
						</view>
						<view class="form_item disable_style">
							<view class="left">
								供货商库存
							</view>
							<view class="right">
								<view class="fr-ac">
									<switch :disabled="true" :checked="manufacturers_has_goods" :color="PUBLIC_STYLE.color"
										style="transform:scale(0.7)" />
								</view>
							</view>
						</view>
						<view class="form_item disable_style">
							<view class="left">
								供货商名称
							</view>
							<view class="right">
								<view class="fr-ac">
									<view class="form_value">
										<input :disabled="true" v-model="supplier_name" type="text" placeholder="请填写供货商名称" />
									</view>
								</view>
							</view>
						</view>

						<view class="form_item disable_style">
							<view class="left">
								是否特殊商品
							</view>
							<view class="right">
								<view class="fr-ac">
									<switch :disabled="true" :checked="is_special" :color="PUBLIC_STYLE.color"
										style="transform:scale(0.7)" />
								</view>
							</view>
						</view>
						<view class="form_item disable_style" style="flex-direction: column;">
							<view class="fr-ac-jsb" style="width: 100%;">
								<view class="left">
									商品规格
								</view>
								<!-- <view @click="skus_show =true" class="right"> -->
								<view class="right">
									<view class="fr-ac">
										<view class="form_value" :style="{color: PUBLIC_STYLE.color}">
											+添加规格
										</view>
									</view>
								</view>
							</view>
							<template v-if="skus.length>0">
								<view class="goods_size_box">
									<view class="goods_size_box_item fr-ac" v-for="(item,index) in skus" :key="index">
										<view class="goods_size_box_item_text" style="width: 40%;">
											规格{{index+1}}：{{item.sku_name}}
										</view>
										<view v-if="item.first_price" class="goods_size_box_item_text"
											style="width: 20%;">
											{{item.first_price}}元
										</view>
										<view v-if="item.second_price" class="goods_size_box_item_text"
											style="width: 20%;">
											{{item.second_price}}元
										</view>
										<view v-if="item.three_price" class="goods_size_box_item_text"
											style="width: 20%;">
											{{item.three_price}}元
										</view>
									</view>
								</view>
							</template>
						</view>
						<view class="form_item disable_style">
							<view class="left">
								是否包邮
							</view>
							<view class="right">
								<view class="fr-ac">
									<switch :disabled="true" :checked="is_postage" :color="PUBLIC_STYLE.color"
										style="transform:scale(0.7)" />
								</view>
							</view>
						</view>


					</view>

					<view class="form_box2 disable_style">
						<view class="form_name">
							添加商品图片
						</view>
						<view v-if="!oss_info.fullurl" @click="imageChoose" class="add_img">
							<view class="">
								<view class="iconfont icon-tubiaotuku"></view>
							</view>
							<view class="add_text">
								点击添加图片
							</view>
						</view>
						<image @click="imageChoose" class="add_img" v-if="oss_info.fullurl" :src="oss_info.fullurl"
							mode="" style="border: none;"></image>
						<view class="form_name">
							添加内容
						</view>
						<view class="add_content">
							<textarea :disabled="true" v-model="description" :maxlength="0" class="add_textarea" name="" id="" cols="30"
								rows="10" placeholder="请输入商品描述"></textarea>
						</view>
						<view @click="submit" class="submit_box">
							确认修改
						</view>
						<view class="" style="height: 80rpx;">

						</view>
					</view>
				</view>
			</template>

			<template>
				<u-popup :show="skus_show" @close="skus_show = false" :closeable="true">
					<view class="popup_box">
						<view class="title">
							添加规格
						</view>
						<view class="title_box fr-ac-jsb">
							<view class="text">
								规格名称
							</view>
						</view>
						<view class="size_name">
							<input v-model="skus_item.sku_name" type="text" placeholder="填写规格名称">
						</view>
						<view class="title_box fr-ac-jsb">
							<view class="text">
								规格价格
							</view>
						</view>
						<view class="gooods_size frw">
							<view class="gooods_size_item">
								<input v-model="skus_item.first_price" type="number" placeholder="价格1">
							</view>
							<view class="gooods_size_item">
								<input v-model="skus_item.second_price" type="number" placeholder="价格2">
							</view>
							<view class="gooods_size_item">
								<input v-model="skus_item.three_price" type="number" placeholder="价格3">
							</view>
						</view>

						<view class="shopping fw">
							<view class="confirm" @click="skusConfirm">
								确认
							</view>
						</view>
					</view>
				</u-popup>
			</template>
		</w-container>
	</view>
</template>

<script>
	import {
		isValue
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				goods_id:'',
				goods_info:{},
				
				skus_show: false,

				category_list: [],


				category_choose: {},
				goods_sn: '',
				title: '',
				description: '',
				is_special: true,
				is_postage: true,
				supplier_name: '',
				manufacturers_has_goods: true,
				stocks: '',
				skus: [],

				skus_item: {
					sku_name: '',
					first_price: '',
					second_price: '',
					three_price: '',
				},

				oss_info: {

				},
			}
		},
		watch: {
			skus_item: {
				deep: true,
				handler(newVal, oldVal) {
					const first_price = Number(newVal.first_price)
					if (first_price > 0) {
						this.skus_item.first_price = first_price
						this.skus_item.second_price = first_price + 5
						this.skus_item.three_price = first_price + 10
					}
				}
			}
		},
		onLoad(options) {
			this.goods_id = options.goods_id
			this.get_goods_info()
		},
		onShow() {},
		methods: {
			//获取商品信息
			async get_goods_info() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.goods/get_goods_info',
					data: {
						goods_id:this.goods_id
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.goods_info = res.data.goods_info
					//分类
					this.category_choose = {
						name:this.goods_info.category_name,
						id:this.goods_info.category_id
					}
					//商品名称
					this.title = this.goods_info.title
					//商品货号
					this.goods_sn = this.goods_info.goods_sn
					//商品库存
					
					//供货商库存
					this.manufacturers_has_goods = this.goods_info.manufacturers_has_goods == 1?true:false
					//供货商名称
					this.supplier_name = this.goods_info.supplier_name
					//是否特殊商品
					this.is_special = this.goods_info.is_special == 1?true:false
					//商品规格
					this.skus = res.data.sku_list
					//是否包邮
					this.is_postage = this.goods_info.is_postage == 1?true:false
					//图片
					this.oss_info = {
						fullurl:this.ossURL + this.goods_info.image,
						url:this.goods_info.image
					} 
					//添加内容
					this.description = this.goods_info.description
					
					// this.sku_list = res.data.sku_list
					// this.new_sku_list = res.data.new_sku_list
					// this.new_sku_choose = this.new_sku_list[0]
				}
			},
			async get_category_list() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.goods/get_category_list',
					data: {}
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.category_list = res.data.category_list
				}
			},
			pageReload() {
				const pages = getCurrentPages()
				// 声明一个pages使用getCurrentPages方法
				const curPage = pages[pages.length - 1]
				// 声明一个当前页面
				curPage.onLoad()
				
			},
			//添加商品
			async add_goods() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.goods/edit_goods',
					data: {
						category_id: this.category_choose.id,
						goods_sn: this.goods_sn,
						title: this.title,
						description: this.description,
						is_special: this.is_special ? 1 : 0,
						is_postage: this.is_postage ? 1 : 0,
						supplier_name: this.supplier_name,
						manufacturers_has_goods: this.manufacturers_has_goods ? 1 : 0,
						stocks: this.stocks,
						skus: JSON.stringify(this.skus),
						image: this.oss_info.url
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					uni.showModal({
						title:'修改成功',
						showCancel:false,
						success: (res) => {
							if(res.confirm){
								uni.reLaunch({
									url:'/pages/goods/classification'
								})
							}else{
							}
						},
						complete: () => {
						}
					})
				}
			},
			async submit() {
				// if (!this.title) {
				// 	return uni.showToast({
				// 		title: '请输入商品名称',
				// 		icon: 'none'
				// 	})
				// }
				// if (!this.goods_sn) {
				// 	return uni.showToast({
				// 		title: '请输入商品货号',
				// 		icon: 'none'
				// 	})
				// }
				if (!this.stocks) {
					return uni.showToast({
						title: '请输入商品库存',
						icon: 'none'
					})
				}
				// if (!this.supplier_name) {
				// 	return uni.showToast({
				// 		title: '请输入供货商名称',
				// 		icon: 'none'
				// 	})
				// }
				// if (!this.skus.length) {
				// 	return uni.showToast({
				// 		title: '请添加规格',
				// 		icon: 'none'
				// 	})
				// }
				// if (!this.oss_info.url) {
				// 	return uni.showToast({
				// 		title: '请添加商品图片',
				// 		icon: 'none'
				// 	})
				// }

				// if (!this.description) {
				// 	return uni.showToast({
				// 		title: '请输入商品描述',
				// 		icon: 'none'
				// 	})
				// }
				this.add_goods()
			},

			goClassificationChoose() {
				return
				uni.navigateTo({
					url: '/pages/goods/classification_choose',
					success: (res) => {
						// res.eventChannel.emit('goClassificationChooseData',this.category_list)
					},
					events: {
						getClassification: (res) => {
							this.category_choose = res
						}
					}
				})
			},

			skusConfirm() {
				this.skus.push(this.skus_item)
				this.skus_item = {
					sku_name: '',
					first_price: '',
					second_price: '',
					three_price: '',
				}
				this.skus_show = false
			},

			imageChoose() {
				return
				uni.chooseImage({
					count: 1, // 最大选择的张数，默认是九张，可以不写
					success: res => {
						console.log(res);
						// 接受选择的图片数组
						console.log(res.tempFiles)
						this.uploadImage(res.tempFiles[0].path)
					},
					fail: (err) => {
						console.log(err, '图片选择失败')
					}
				})
			},
			//上传图片
			async uploadImage(filePath) {
				console.log(filePath, 'filePath')
				uni.showLoading({
					title: '飞速加载中...'
				})
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.baseURL + '/addons/shop/api.common/upload', //后端接口地址，后端解决了oss相关密钥获取
						filePath: filePath,
						name: 'file',
						fileType: 'image',
						header: {
							token: this.User_Info.token,
							'content-type': 'multipart/form-data'
						},
						formData: {
							source: 1, //1-商品图片 2-售后图片
							file: filePath
						},
						success: (res) => {
							uni.hideLoading()
							console.log(res.data, 1111);
							this.oss_info = JSON.parse(res.data).data
							// console.log(JSON.parse(res.data),22222);
						},
						fail: (res) => {
							console.log(res, 333333333);
							uni.hideLoading()
						},
					});
				})
			},
		}

	}
</script>

<style lang="scss">
	.disable_style{
		view,text,input{
			color: #888;
		}
	}
	
	.content {
		box-sizing: border-box;
		background-color: rgb(245, 244, 248);
		overflow: hidden;
	}

	.form_box {
		margin: 20rpx 0;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 30rpx 30rpx;

		.form_name {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 50rpx;
		}

		.form_item {
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid rgb(244, 244, 244);
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {}

			.right {

				.form_value {
					text-align: right;
				}

				.iconfont {
					color: #888;
					text-align: right;
				}

				.iconfont {
					margin-left: 10rpx;
				}
			}
		}
	}

	.form_box2 {
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 30rpx 30rpx;

		.form_name {
			font-size: 32rpx;
			font-weight: bold;
		}

		.add_img {
			margin: 40rpx 0;
			width: 200rpx;
			height: 200rpx;
			border: 2rpx dashed #eee;

			image {
				margin: 15rpx 40rpx;
				width: 120rpx;
				height: 120rpx;
			}

			.iconfont {
				width: 120rpx;
				height: 120rpx;
				line-height: 120rpx;
				margin: 15rpx 40rpx;
				text-align: center;
				font-size: 70rpx;
				color: #888;
			}

			.add_text {
				font-size: 24rpx;
				color: #888;
				text-align: center;
			}
		}


		.add_content {
			margin: 40rpx 0;
			width: 100%;
			height: 200rpx;
			overflow: scroll;
			border: 2rpx dashed #eee;
			box-sizing: border-box;
			padding: 20rpx;

			.add_textarea {
				width: 100%;
				height: 200rpx;

			}
		}

		.submit_box {
			text-align: center;
			padding: 20rpx 0;
			color: white;
			background-color: $theme-color;
		}
	}

	.popup_box {
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		background-color: white;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}

		.size_name {
			border: 3rpx solid black;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
		}


		.gooods_size {

			.gooods_size_item {
				width: 21%;
				margin: 10rpx 2%;
				padding: 8rpx 0;
				text-align: center;
				border: 2rpx solid #eee;
			}

			&.check {
				background-color: $theme-color;
				color: white;
			}
		}

		.title_box {
			margin: 30rpx 0;

			.text {
				font-weight: bold;
			}
		}

		.shopping {
			margin-top: 40rpx;
			width: 100%;
			height: 70rpx;

			.confirm {
				line-height: 70rpx;
				text-align: center;
				width: 100%;
				background-color: $theme-color;
				color: white;
			}
		}
	}

	.goods_size_box {
		width: 100%;
		margin-top: 30rpx;
		background-color: rgb(250, 250, 252);
		padding: 10rpx 0;

		.goods_size_box_item {
			box-sizing: border-box;
			border-bottom: 1rpx solid #888;
			padding: 20rpx;
		}

		.goods_size_box_item:nth-last-child(1) {
			border-color: transparent;
		}

		.goods_size_box_item_text {
			white-space: nowrap;
			text-align: center;
			border-right: 1rpx solid #888;
		}

		.goods_size_box_item_text:nth-last-child(1) {
			border: none;
		}

		.goods_size_box_item_text:nth-child(1) {
			padding-left: 0;
			text-align: left;
		}
	}
</style>